<template>
  <div class="schoolPage">
    <div class="bread">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '#' }">书法教学</el-breadcrumb-item>
        <el-breadcrumb-item>特色学校</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="schools-container">
      <div class="school-card" v-for="school in schoolList" :key="school.id">
        <router-link :to="{name:'schoolDetail', query: {id:school.id}}" target="_blank">
          <div class="school-image">
            <img :src="school.coverUrl" :alt="school.name">
          </div>
          <div class="school-content">
            <h3 class="school-name">{{ school.schoolName }}</h3>
            <p class="school-description">{{ school.introduction }}</p>
            <a href="#" class="read-more">了解更多 →</a>
          </div>
        </router-link>
      </div>
    </div>
    <div class="page">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>

import { listSpecial } from '@/api/teach/school/special'
import ImageNonePreview from '@/components/ImagePreview/ImageNonePreview.vue'
import { cutString } from '@/utils/ruoyi'

export default {
  name: 'SpecialSchool',
  components: { ImageNonePreview },
  data() {
    return {
      total: 0,
      schoolList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 6,
        grade: '0'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    cutString,
    getList() {
      this.loading = true
      listSpecial(this.queryParams).then(response => {
        this.schoolList = response.rows
        this.total = response.total
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.schoolPage {
  font-family: 'Roboto', sans-serif;

}


.schools-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}

.school-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.school-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.school-image {
  height: 200px;
  overflow: hidden;
}

.school-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.school-card:hover .school-image img {
  transform: scale(1.05);
}

.school-content {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.school-name {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 15px;
  font-weight: 600;
}

.school-description {
  color: #5a6c7d;
  line-height: 1.6;
  flex-grow: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.read-more {
  margin-top: 15px;
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  transition: color 0.3s;
}

.read-more:hover {
  color: #2980b9;
}

.page {
  text-align: center;
  margin-top: 30px;

  ::v-deep .number.active {
    background-color: #337ab7 !important;
  }
}
</style>
